<script src="../../../components/ssty/common.js"></script>
<template>
	<view class="container">
		<view class="popup_group">
			<view class="popup_group_item" v-if="partitionMode==1">
				<view class="popup_group_item_label">分区名称</view>
				<view class="popup_group_item_value">
					<input v-model="partition.name" type="text" maxlength="3" value="" placeholder="最长3个字" @blur="onNameChange" :focus="nameFocusState" />
				</view>
			</view>
			
			<!-- <view class="popup_group_item" v-if="partitionMode==1">
				<view class="popup_group_item_label">分区起始钓位</view>
				<view class="popup_group_item_value">
					<input v-model="partition.seatFrom" type="number" maxlength="3" placeholder="请输入分区开始钓位" />
				</view>
			</view>
			
			<view class="popup_group_item" v-if="partitionMode==1">
				<view class="popup_group_item_label">分区结束钓位</view>
				<view class="popup_group_item_value">
					<input v-model="partition.seatTo" type="number" maxlength="3" placeholder="请输入分区结束钓位" />
				</view>
			</view>
			
			<view class="popup_group_item" v-if="partitionMode==0">
				<view class="popup_group_item_label">钓位数量</view>
				<view class="popup_group_item_value">
					<input v-model="partition.seatTo" type="number" maxlength="3" placeholder="钓位数量" />
				</view>
			</view>
			
			<view class="popup_group_item" @click="jumpSeatDevConf">
				<view class="popup_group_item_label">钓位设备配置</view>
				<view class="popup_group_item_value">
					<view><span class="iconfont">&#xe6bd;</span></view>
				</view>
			</view> -->
		</view>
		
		<view class="popup_group">	
			<view class="popup_group_item">
				<view class="popup_group_item_label">选位方式</view>
				<view class="popup_group_item_value">
					<radio-group @change="onSeatModeChange($event)" style="display: flex;">
						<label style="display: flex;">
							<view><radio value=1 :checked="1 == partition.seatMode" /></view>
							<view>自选</view>
						</label>
						<label style="display: flex; margin-left: 20rpx;">
							<view><radio value=2 :checked="2 == partition.seatMode" /></view>
							<view>摇号</view>
						</label>
					</radio-group>
				</view>
			</view>
			
			<view class="popup_group_item">
				<view class="popup_group_item_label">回鱼计价方式</view>
				<view class="popup_group_item_value">
					<radio-group @change="onRetPriceTypeChange($event)" style="display: flex;">
						<label style="display: flex;">
							<view><radio value=1 :checked="1 == partition.retPriceType || 3 == partition.retPriceType" /></view>
							<view>元/斤</view>
						</label>
						<label style="display: flex; margin-left: 20rpx;">
							<view><radio value=2 :checked="2 == partition.retPriceType" /></view>
							<view>元/条</view>
						</label>
					</radio-group>
				</view>
			</view>
			
			<view class="popup_group_item" v-if="(1 == partition.retPriceType || 3 == partition.retPriceType) && isPlatformAdmin">
			  <view class="popup_group_item_label">去皮模式</view>
			  <view class="popup_group_item_value">
					<label>
						<switch color="#f00" disabled @click="onChangeSkinMode($event)" :checked="3 == partition.retPriceType" />快速
					</label>
			    <!-- <radio-group @change="onChangeSkinMode($event)" style="display: flex;">
			      <label style="display: flex;">
			        <view><radio value=0 :checked="0 == changeSkinMode" /></view>
			        <view>标准</view>
			      </label>
			      <label style="display: flex; margin-left: 20rpx;">
			        <view><radio value=1 :checked="1 == changeSkinMode" /></view>
			        <view>快速</view>
			      </label>
			    </radio-group> -->
			  </view>
			</view>
			
			<view class="popup_group_item">
				<view class="popup_group_item_label">计时方式</view>
				<view class="popup_group_item_value">
					<radio-group @change="onTimeModeChange($event)" style="display: flex;">
						<label style="display: flex;">
							<view><radio value=1 :checked="1 == partition.timeMode" /></view>
							<view>固定时间段</view>
						</label>
						<label style="display: flex; margin-left: 20rpx;">
							<view><radio value=2 :checked="2 == partition.timeMode" /></view>
							<view>随到随钓</view>
						</label>
					</radio-group>
				</view>
			</view>

      <view class="popup_group_item">
        <view class="popup_group_item_label">允许换位</view>
        <view class="popup_group_item_value">
          <radio-group @change="onAllowChangeSeat($event)" style="display: flex;">
            <label style="display: flex;">
              <view><radio value=0 :checked="0 == partition.allowChangeSeat" /></view>
              <view>不允许换位</view>
            </label>
            <label style="display: flex; margin-left: 20rpx;">
              <view><radio value=1 :checked="1 == partition.allowChangeSeat" /></view>
              <view>允许换位</view>
            </label>
          </radio-group>
        </view>
      </view>
	  
	  <view class="popup_group_item">
	    <view class="popup_group_item_label">是否延迟显示回鱼</view>
	    <view class="popup_group_item_value">
	      <radio-group @click="onChangeScoreMode($event)" style="display: flex;">
	        <label style="display: flex;">
	          <view><radio value=1 :checked="1 == partition.scoreMode" /></view>
	          <view>不延迟</view>
	        </label>
	        <label style="display: flex; margin-left: 20rpx;">
	          <view><radio value=0 :checked="0 == partition.scoreMode" /></view>
	          <view>订单结束10分钟后显示</view>
	        </label>
	      </radio-group>
	    </view>
	  </view>

      <view class="popup_group_item" v-if="partition.allowChangeSeat==1">
        <view class="popup_group_item_label">换位价格（元）</view>
        <view class="popup_group_item_value"><input v-model="partition.changeSeatPrice" type="digit" maxlength="5" placeholder="最低1元钱" /></view>
      </view>

      <view class="popup_group_item">
				<view class="popup_group_item_label">垂钓准备时长（分钟）</view>
				<view class="popup_group_item_value"><input v-model="partition.maxPrepareTime" type="number" maxlength="2" placeholder="垂钓准备时长（分钟）" /></view>
			</view>
		</view>
		
		<view v-for="(item, index) in partition.prices" :key="index">
			<view style="display: flex;justify-content: center; margin-bottom:-20rpx;">
				<view>第{{index+1}}个{{partition.timeMode==1?'时段':'时长'}}设置</view>
			</view>
			<view class="popup_group">	
				<view class="popup_group_item">
					<view class="popup_group_item_label">规格名称(可选)</view>
					<view class="popup_group_item_value">
						<input v-model="item.name" type="text" value="" placeholder="默认以时间作为名称" />
					</view>
				</view>
				
				<view class="popup_group_item" v-if="partition.timeMode==1">
					<view class="popup_group_item_label">开始时间</view>
					<view class="popup_group_item_value">
						<picker mode="time" :value="item.startTime" start="05:00" end="23:59" @change="onStartTimeChange($event, index)">
							<view class="uni-input">{{item.startTime}}</view>
						</picker>
					</view>
				</view>
				
				<view class="popup_group_item" v-if="partition.timeMode==1">
					<view class="popup_group_item_label">结束时间</view>
					<view class="popup_group_item_value">
						<picker mode="time" :value="item.endTime" start="05:00" end="23:59" @change="onEndTimeChange($event, index)">
							<view class="uni-input">{{item.endTime}}</view>
						</picker>
					</view>
				</view>
				
				<view class="popup_group_item" v-if="partition.timeMode==2">
					<view class="popup_group_item_label">垂钓时长</view>
					<view class="popup_group_item_value">
						<picker mode="multiSelector" :range="duratitionParts" :value="getDurationValue(item.duration)" @change="onDurationChange($event, index)">
							<view>{{getDurationText(item.duration)}}</view>
						</picker>
					</view>
				</view>
				
				<view class="popup_group_item">
					<view class="popup_group_item_label">钓票（元）</view>
					<view class="popup_group_item_value"><input :disabled="!isPlatformAdmin" v-model="item.price" type="digit" maxlength="6" placeholder="请输入钓票价格" /></view>
				</view>
				
				<view class="popup_group_item">
					<view class="popup_group_item_label">回鱼价格（元）</view>
					<view class="popup_group_item_value"><input :disabled="!isPlatformAdmin" v-model="item.retPrice" type="digit" maxlength="5" placeholder="请输入回鱼价格" /></view>
				</view>
				
				<view class="popup_group_item">
					<view class="popup_group_item_label">推广佣金1（元）</view>
					<view class="popup_group_item_value"><input :disabled="!isPlatformAdmin" v-model="item.extensionOne" type="digit" maxlength="5" placeholder="请输入一级佣金" /></view>
				</view>
				
				<view class="popup_group_item">
					<view class="popup_group_item_label">推广佣金2（元）</view>
					<view class="popup_group_item_value"><input :disabled="!isPlatformAdmin" v-model="item.extensionTwo" type="digit" maxlength="5" placeholder="请输入二级佣金" /></view>
				</view>
				
				<view class="popup_group_item" style="display: flex; justify-content: flex-end; padding: 16rpx 30rpx; ">
					<button :disabled="index==0" class="mini-btn" type="warn" size="mini" @click="delPrice(index)" >删除</button>
					<button v-if="index==(partition.prices.length-1)" class="mini-btn" type="warn" size="mini" @click="addPrice" style="margin-left: 40rpx;">添加</button>
				</view>
				
			</view>
		</view>
		
		<view class="handle dobuButton">
			<view class="handle_button margin_right" @click="onCancel">取消</view>
			<view class="handle_button" @click="onOK">确定</view>
		</view>
		
	</view>
</template>

<script>
const app = getApp();	
import { navigateTo, Toast, setStorage, navigateBack, getStorage } from '../../../libs/uniApi.js';
import avatar from "@/components/yq-avatar/yq-avatar.vue";
import {TOKENNAME, HTTP_REQUEST_URL} from '@/config/app.js';
import store from '@/store';
import {genDefaultPartition,genDefaultPartitionPrice,genDefaultSeat} from '../../../components/ssty/common.js'
export default {
	components: {
		avatar
	},
	data() {
		return {
			duratitionParts: [['请选择小时',0,1,2,3,4,5,6,7,8],['请选择分钟',0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59]],
			partitionMode: 0, // 0-无分区，1-有分区
			changeSkinMode: 0,
			nameFocusState: true,  	// 分区名称输入框的焦点状态，默认是获得焦点
			partition: genDefaultPartition(),
			
			isPlatformAdmin: false,
		};
	},
	onLoad(opt) {
		this.isPlatformAdmin = app.globalData.isPlatformAdmin;
		
		//console.log("ypPartition::onLoad, opt=%o", opt);
		//let m = parseInt(opt.partitionMode);
		//this.partitionMode = m;
		//this.partition = opt.partition;
		//this.otherPartitionNames = opt.otherPartitionNames;
		console.log("ypPartition::onLoad, app.globalData.ypPartition=%o", app.globalData.ypPartition);
		let {partitionMode, partition, otherPartitionNames} = JSON.parse(JSON.stringify(app.globalData.ypPartition));
		this.partitionMode = partitionMode;
		this.partition = partition;
		// if(partitionMode==0)
		// 	this.partition.seatFrom = 1;
		this.otherPartitionNames = otherPartitionNames;
		// this.prepairSeats();
		
		uni.setNavigationBarTitle({
		　　title: partitionMode==0?"钓塘设置":partition.name+"设置"
		})
	},
	onShow() {
		// if(app.globalData.ypSeats) {
			// 刚从seat页面返回的情况
			// console.log("ypPartition::onShow| config seats return, value=%o", app.globalData.ypSeats);
			// this.partition.seats = app.globalData.ypSeats;
			// delete app.globalData.ypSeats;
		// }
	},
	computed: {
		group_count: {
			get() {
				return this.partition.prices.length;
			},
			set(a) {
				for(let i = a; i < this.partition.prices.length; i++) {
					this.partition.prices.splice(i, 1);
				}
				for(let i = this.partition.prices.length; i < a; i++) {
					if(this.partition.prices[0] && this.partition.prices[0].price*1>0)
						this.partition.prices.push(genDefaultPartitionPrice('06:00', '10:00', 4, this.partition.prices[0].price));
					else
						this.partition.prices.push(genDefaultPartitionPrice('06:00', '10:00', 4, 1.0));
				}
			}
		}
	},
	watch: {
		// partition: {
		// 	handler(val) {
		// 		console.log("ypPartition| partition changing: %o", app.globalData.ypPartition.partition);
		// 		if(this.partitionMode == 1) {
		// 			if(parseInt(val.seatFrom) != parseInt(this.partition.seatFrom) 
		// 				|| parseInt(val.seatTo) != parseInt(this.partition.seatTo)) 
		// 			{
		// 				this.prepairSeats();
		// 			}
		// 		}
		// 		this.partition = val;
		// 		console.log("ypPartition| partition changed: %o", val);
		// 	},
		// 	deep: true
		// },
	},
	methods: {
		// prepairSeats() {
		// 	let seatFrom = parseInt(this.partition.seatFrom), 
		// 		seatTo = parseInt(this.partition.seatTo);

		// 	for(let i = 0; i < this.partition.seats.length; i++) {
		// 		if(this.partition.seats[i].seatNo < seatFrom || this.partition.seats[i].seatNo > seatTo) {
		// 			this.partition.seats.splice(i, 1);
		// 			i--;
		// 		}
		// 	}
		// 	for(let i = seatFrom; i <= seatTo; i++) {
		// 		if(this.partition.seats.findIndex(a=>a.seatNo===i) === -1)
		// 			this.partition.seats.push(genDefaultSeat(i));
		// 	}
		// },
		// jumpSeatDevConf() {
		// 	this.prepairSeats();
		// 	app.globalData.ypSeats = this.partition.seats;
		// 	navigateTo(1, '/pages/product/addGoods/ypSeat');
		// },
		onSeatModeChange(e) {
			this.partition.seatMode = parseInt(e.detail.value);
		},
		onRetPriceTypeChange(e) {
			this.partition.retPriceType = parseInt(e.detail.value);
		},
		onTimeModeChange(e) {
			this.partition.timeMode = parseInt(e.detail.value);
			this.partition.prices.forEach(a=>{
				if(!a.startTime)
					a.startTime = '06:00';
				if(!a.endTime)
					a.endTime = '10:00';
			})
		},
    onAllowChangeSeat(e) {
      this.partition.allowChangeSeat = parseInt(e.detail.value);
    },
		onChangeSkinMode(e) {
			let that = this;
			if(that.partition.retPriceType!=3){
				uni.showModal({
					title: '注意',
					content: '此模式设计为鱼情非常火爆的竞赛钓塘使用，每分钟上鱼小于3杆的钓塘不建议使用。确认选用此模式？',
					success: (res)=> {
						if (res.confirm) {
							that.partition.retPriceType = 3;
						} else if (res.cancel) {
							that.partition.retPriceType = 1;
						}
					}
				});
			}else{
				that.partition.retPriceType = 1;
			}
		},
		onChangeScoreMode(e) {
			this.partition.scoreMode = parseInt(e.detail.value);
		},
		onStartTimeChange(e, index) {
			this.partition.prices[index].startTime = e.target.value;
		},
		onEndTimeChange(e, index) {
			this.partition.prices[index].endTime = e.target.value;
		},
		onDurationChange(e, index) {
			let duration = 0;
			if(e.detail.value[0] > 1)
				duration = this.duratitionParts[0][e.detail.value[0]]*60;
			if(e.detail.value[1] > 1)
				duration += this.duratitionParts[1][e.detail.value[1]];

			this.$set(this.partition.prices[index], 'duration', duration);
			console.log("onDurationChange, index=%o, duration=%o", index, duration)
			
		},
		getDurationText(duration) {
			let hour = !duration?0:parseInt(duration/60);
			let miniute = !duration?0:duration%60;
			let t = hour + '小时' + miniute + '分钟';
			console.log("getDurationText, duration=%o, t=%o", duration, t)
			return t;
		},
		getDurationValue(duration) {
			if(!duration)
				return [0,0];
			let hourIdx = parseInt(duration/60) + 1;
			let miniuteIdx = (duration%60) + 1;
			let a = [hourIdx, miniuteIdx];
			console.log("getDurationValue, duration=%o, a=%o", duration, a)
			return a;
		},
		addPrice() {
			if(this.partition.prices[0] && this.partition.prices[0].price*1>0)
				this.partition.prices.push(genDefaultPartitionPrice('06:00', '10:00', 4, this.partition.prices[0].price));
			else
				this.partition.prices.push(genDefaultPartitionPrice('06:00', '10:00', 4, 1.0));
		},
		delPrice(i) {
			this.partition.prices.splice(i, 1);
		},
		onNameChange(e) {
			// 统一放到上页去校验
			// console.log("onNameChange: e=%o", e);
			// if(this.otherPartitions.find(a=>a.name==e.detail.value)) {
			// 	Toast('分区名称重复');
			// 	this.nameFocusState = true;
			// }
		},
		onCancel() {
			navigateBack(1);
		},
		onOK() {
			// this.prepairSeats();
			app.globalData.ypPartition.partition = this.partition;
			navigateBack(1);
		}
	}
};
</script>

<style lang="scss" scoped>
@import './scss/index.scss';
</style>
